<template>
    <rx-layout class="rxMylayout">
        <div slot="header" class="header-menu">
            <div class="header-left">
                <img style="margin-right:10px;" src="../../../../image/icon.png">
                意见模板
            </div>
        </div>
        <div slot="center">
            <div style="height: 100%;overflow: hidden;display: flex;flex-direction: column;">
                <div class="toolbar">
                    <a-button type="primary" @click="saveOpinionTemplate" size="small" :loading="loading">
                        {{ $ti18('rxForm.saveBtn', '保存') }}
                    </a-button>

                    <a-button type="danger" @click="removeTemplate" :disabled="messageObj.isDefault != 'NO'"
                              size="small">
                        {{ i18n('form.templateDelete', '删除当前模板') }}
                    </a-button>
                </div>
                <div style="padding: 0px 13px 13px 13px">
                    意见模板内容
                </div>
                <div>
                    <div class="editor-container" style="height: 500px;">
                        <vue-ueditor-wrap
                            v-model="template"
                            :init="init"
                            class="editbox"
                            @ready="ready"
                            :config="editorConfig"
                            @beforeInit="addCustomButton"
                        >
                        </vue-ueditor-wrap>
                    </div>
                </div>
            </div>
        </div>
        <div slot="right" showButton="true" width="333" class="right-card">
            <div class="left-card-head">
                {{ i18n('title.field', '表单字段') }}
            </div>
            <a-card style="width: 100%;height:calc( 100% - 40px);overflow: auto;border: none">
                <div class="tips">
                    <i class="iconfont iconprompt_fill gdticon"></i>
                    <span>
                    {{ i18n('form.cursor', '点击主表或子表对应的字段，则可插入编辑器光标对应位置') }}
                </span>
                </div>
                <a-collapse default-active-key="0">
                    <a-collapse-panel :key="0" style="margin-bottom: 10px">
                        <div slot="header">
                            <a-tag color="#87d068">
                                {{ i18n('title.tableMaster', '主表') }}
                            </a-tag>
                            <span>{{ formFields[0].title }}</span>
                        </div>
                        <div>
                            <div class="self-table-body" v-for="(item, i) in formFields[0].children" :key="i">
                                <span @click="onSelectField(item, i,false)">{{ item.comment }}</span>
                                <span @click="onSelectField(item, i,true)" class="item-right"> {{ item.name }} </span>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
                <a-collapse default-active-key="0">
                    <a-collapse-panel v-for="(sub, i) in subList" :key="i" style="margin-bottom: 10px">
                        <div slot="header" style="display: flex">
                           <span> <a-tag color="#ff7b52">
                               {{ i18n('title.subTable', '子表') }}
                           </a-tag></span>
                            <span style="flex:1">{{ sub.title }}</span>
                            <span v-if="sub.relationType=='onetomany'" @click.stop="onSelectField(sub, i,true)"><my-icon
                                type="iconxinzeng"></my-icon>
                                 {{ i18n('form.tableAdd', '添加表格') }}
                            </span>
                        </div>
                        <div>
                            <div class="self-table-body" v-for="(item, i) in sub.children" :key="i">
                            <span @click="onSelectField(item, i,false)">{{ item.comment }}</span
                            ><span @click="onSelectField(item, i,true)" class="item-right"> {{ item.name }} </span>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
                <a-collapse default-active-key="0">
                    <a-collapse-panel :key="0" style="margin-bottom: 10px">
                        <div slot="header" style="display: flex">
                            <span> <a-tag color="#1890ff">{{ i18n('title.process', '流程') }}</a-tag></span>
                            <span style="flex:1">{{ i18n('title.publicField', '流程公共字段') }}</span>
                        </div>
                        <div>
                            <div class="self-table-body" v-for="(item, i) in bpmInstFields" :key="i">
                                <span @click="onSelectBpmInstField(item, i,false)">{{ item.comment }}</span>
                                <span @click="onSelectBpmInstField(item, i,true)" class="item-right"> {{
                                        item.name
                                    }} </span>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
                <div>
                    <div class="self-table-body"  >
                        <span @click="editor.execCommand('inserthtml', '意见占位符');">意见占位符</span>
                        <span @click="editor.execCommand('inserthtml', '${opinionPlaceholder}');" class="item-right">opinionPlaceholder</span>
                    </div>
                </div>

            </a-card>
        </div>
    </rx-layout>
</template>
<script>
import BpmMessageTemplateApi from '@/api/bpm/core/bpmMessageTemplate';
import BpmDefaultTemplateApi from '@/api/bpm/core/bpmDefaultTemplate'
import {RxDialog, BaseFormModel, DomUtil, Util} from '@lowcode/jpaas-common-lib';
import {templateTypes, templateTypeMap} from "@/views/modules/bpm/core/js/TemplateTypes";
import VueUeditorWrap from 'vue-ueditor-wrap';
import baidu from 'baidutemplate/baiduTemplate'
import subTable from './js/SubTable';
import flowNode from "@/views/modules/bpm/comps/flowNode";
import editAddButton from "@/views/modules/bpm/core/js/editAddButton";
import UeditorConfig from "@/assets/js/UeditorConfig";

export default {
    name: 'BpmOpinionTemplate',
    components: {
        RxDialog,
        VueUeditorWrap
    },
    mixins: [editAddButton],
    data() {
        return {
            defId: "",
            nodeId: "",
            boAlias: "",
            //消息类型
            msgType: "opinion",
            //模板类型
            templateType: "opinion",
            //模板分类
            treeData: [],
            //表单字段
            formFields: [],
            //模板
            template: "",
            //是否插入字段
            insertField: true,
            //保存按钮是加载
            loading: false,
            editor: '',
            editorConfig: UeditorConfig,
            currentMenu: 0,//左边点击的index
            headerMenu: [],
            itemClickMenu: 0,//头部点击的index
            subList: [],
            title: '意见模板',
            titleShow: false,
            templateShow: false,
            message: {},
            messages: [],
            bpmInstFields: [],
            messageObj: {}

        }
    },
    created() {
        this.defId = this.$route.params.defId;
        this.nodeId = this.$route.params.nodeId;
        this.boAlias = this.$route.params.boAlias;


        this.getTemplates();

        this.getFields();

        this.getBpmInstFields();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "BpmMessageTemplate", key);
        },
        focusTemplate() {
            this.titleShow = false;
            this.templateShow = true;
        },
        getBpmInstFields() {
            BpmMessageTemplateApi.getBpmInstPublicField().then(res => {
                this.bpmInstFields = res.data;
            })
        },
        onSelectBpmInstField(item, i, checked) {
            this.insertField = checked;
            let obj = item
            let html = "";
            if (this.insertField) {
                html = "${" + obj.name + "}";
            } else {
                html = obj.comment;
            }
            if (this.titleShow) {
                this.title += html;
            } else {
                this.editor.execCommand('inserthtml', html);
            }
        },
        dataType(name) {
            let json = {"varchar": "iconField-String", "date": "iconriqi", "number": "iconshuzi"};
            return json[name];

        },
        getFields() {
            BpmMessageTemplateApi.getFieldsByAlias(this.boAlias).then(res => {
                for (let alias in res) {
                    let boEnt = res[alias];
                    let {mainEnt, subList} = this.constructFields1(alias, boEnt)
                    this.formFields.push(mainEnt)
                    this.subList = subList

                }
            })
        },
        onChangeField(e) {
            this.insertField = e.target.checked;
        },
        constructFields1(alias, ent) {
            let mainEnt = {key: ent.alias, title: ent.name, boAlias: alias, type: 'table'}
            let attrs = ent.boAttrs
            //处理主表字段
            let mainFields = []
            for (let field of attrs) {
                field.key = field.name
                field.title = field.comment
                field.type = 'field'
                field.relationType = 'main'
                field.boAlias = alias
                mainFields.push(field)
            }
            mainEnt.children = [...mainFields]
            //处理子表
            let subList = ent.subBoList
            for (let subTable of subList) {
                subTable.key = subTable.alias
                subTable.title = subTable.name
                subTable.boAlias = alias
                subTable.type = 'table'

                let subAttrs = subTable.boAttrs
                for (let attr of subAttrs) {
                    attr.key = attr.name
                    attr.title = attr.comment
                    attr.type = 'field'
                    attr.boAlias = alias
                    attr.relationType = subTable.relationType
                }
                subTable.children = [...subAttrs]
            }
            return {mainEnt, subList}
        },
        constructFields(alias, ent) {
            let mainEnt = {key: ent.alias, title: ent.name, boAlias: alias, type: "table"};
            let attrs = ent.boAttrs;
            //处理主表字段
            let mainFields = [];
            for (let field of attrs) {
                field.key = field.name;
                field.title = field.comment;
                field.type = "field";
                field.relationType = "main";
                field.boAlias = alias;
                mainFields.push(field);
            }
            mainEnt.children = [...mainFields];
            //处理子表
            let subList = ent.subBoList;
            for (let subTable of subList) {
                subTable.key = subTable.alias;
                subTable.title = subTable.name;
                subTable.boAlias = alias;
                subTable.type = "table";

                let subAttrs = subTable.boAttrs;
                for (let attr of subAttrs) {
                    attr.key = attr.name;
                    attr.title = attr.comment;
                    attr.type = "field";
                    attr.boAlias = alias;
                    attr.relationType = subTable.relationType;
                }
                subTable.children = [...subAttrs];
                mainEnt.children.push(subTable);
            }

            return mainEnt;

        },
        async getTemplates(leftIndex = 0, headerIndex = 0) {
            BpmMessageTemplateApi.getOpinionByDefAndNodeId(this.defId, this.nodeId, this.templateType).then(res => {
                this.messageObj=res;
                this.template=res.template;
            })
        },
        onSelectTemplate(selectedKeys, e) {
            let obj = e.node._props.dataRef;
            let addNew = false;
            if (!this.msgType || this.msgType != obj.msgType) {
                addNew = true;
            }
            this.msgType = obj.msgType;
            this.templateType = obj.templateType;

            BpmMessageTemplateApi.getTemplateById(obj.id, obj.isDefault).then(res => {
                if (addNew) {
                    this.template = res;
                } else {
                    this.editor.execCommand('inserthtml', res);
                }
            })
        },
        ready(editor) {
            this.editor = editor;
            editor.addListener("mousedown", this.focusTemplate);
            this.cratePop(editor);
        },
        init() {

        },
        cratePop(editor) {
            /*  var popup = new baidu.editor.ui.Popup( {
                  editor:editor,
                  content: '',
                  className: 'edui-bubble'
              });
              popup.render();*/
        },
        onSelectField(item, i, checked) {
            this.insertField = checked;
            let obj = item
            let relationType = obj.relationType;
            let type = obj.type;
            if (type == "table" && (relationType == "main" || relationType == "onetoone")) {
                return;
            }
            let html = "";
            if (this.insertField) {
                if (type == "field") {
                    if (relationType == "main" || relationType == "onetoone") {
                        html = "${util.render(" + obj.boAlias + "." + obj.key + ",'" + obj.control + "','"+'v'+"')}";
                    } else {
                        html = "${util.render(item." + obj.key + ",'" + obj.control + "','"+'v'+"')}";
                    }
                } else {
                    if (relationType == "onetomany") {
                        html = baidu.template(subTable, obj);
                    }
                }
            } else {
                html = obj.title;
            }
            if (this.titleShow) {
                this.title += html;
            } else {
                this.editor.execCommand('inserthtml', html);
            }
        },
        /**
         * 表单模板。
         */
        saveOpinionTemplate() {
            this.loading = true;
            let obj = {
                boAlias: this.boAlias,
                bpmDefId: this.defId,
                msgType: this.msgType,
                nodeId: this.nodeId,
                template: this.template,
                templateType: this.templateType,
                title: this.title
            }
            BpmMessageTemplateApi.saveTemplate(obj).then(res => {
                this.loading = false;
                this.getTemplates(this.currentMenu, this.itemClickMenu);
            });
        },
        removeTemplate() {

            if (this.messageObj.isDefault == "YES") {
                return;
            }

            let self_ = this;
            this.$confirm({
                title: self_.$ti18('rxMsa.tipsInfo', '提示信息'),
                content: self_.i18n('title.templateDelete', '确定删除模板吗'),
                okText: self_.$ti18('rxForm.ackBtn', '确认'),
                cancelText: self_.$ti18('rxForm.cancelBtn', '取消'),
                onOk() {
                    BpmMessageTemplateApi.deleteTemplateAndCache(self_.messageObj).then(res => {
                        self_.getTemplates(self_.currentMenu, self_.itemClickMenu);
                    })
                },
                onCancel() {
                }
            })

        }
    }

}
</script>
<style scoped>
.rxMylayout >>> .ant-collapse-content > .ant-collapse-content-box {
    padding: 0px 12px 12px 12px !important;
}

.bpm-common-vue-ueditor-wrap {
    height: 100%;
    width: calc(100% - 20px);
    margin: auto;
}

.bpm-common-news {
    padding: 13px;
    font-size: 14px;
}

.left-card-head-common {
    padding: 10px;
}

.left-card-head-common li {
    height: 30px;
    line-height: 30px;
    padding: 0px 10px;
    color: #46494d;
    font-size: 14px;
    cursor: pointer;
}

.left-card-head-common-hover {
    background-color: #ecf3fe;
    border-radius: 4px;
    color: #4285f4 !important;
    font-weight: revert;
}

.left-card-head-common li:hover {
    background-color: #ecf3fe;
    border-radius: 4px;
    color: #4285f4;
    font-weight: revert;
}

.left-card-head {
    height: 30px;
    background-color: #f5f7fa;
    color: #46494d;
    font-size: 14px;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #e6e8eb;
}

.rxMylayout >>> .modeleBox {
    padding: 0 !important;
}

.rxMylayout >>> .modeleBox {
    background-image: linear-gradient(to right, #3073f8, #2ca8fe) !important;
    line-height: 44px;
}

.toolbar {
    text-align: right;
    padding: 4px 10px 4px 4px;
    border-bottom: 1px solid #dfdfdf;

}

.toolbar button {
    margin-left: 5px;
}

.commen-menu {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.commen-menu {
    margin-bottom: 0px !important;
}

.current-click {
    background: #edf0ff;
    color: #6675c1;
    border-left: 2px solid #4b6afe;
}

.header-menu {
    width: 100%;
    text-align: center;
}

.header-left {
    position: absolute;
    margin-left: 10px;
    color: #ffffff;
}

.rx-header {
    background: red;
}

.comf {
    color: #ffffff;
    width: 20px;
    height: 20px;
}

.item-menu {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #ffffff;
    margin-right: 10px;
}

.item-menu i {
    font-size: 19px;
    line-height: 16px;
    margin-left: 10px;
    margin-top: 7px;
    float: left;
    margin-right: 3px;
}

.item-click {
    background: #ffffff;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    border-radius: 4px;
    position: relative;
    color: #2e86ff;
}

.item-click:after {
    content: ' ';
    display: inline-block;
    margin: 20px auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fcf6f6;
    position: absolute;
    top: 7px;
    left: 29px;
}

.item-click .comf {
    color: #2e86ff;
}

.left-card >>> .ant-card-head {
    min-height: 30px;
    padding: 0 10px;
}

.left-card >>> .ant-card-body {
    padding: 0 10px;
}

.left-card >>> .ant-card-head-title {
    padding: 0px;
}

.inners {
    /* color: #ffffff; */
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 20px;
}

.gdticon {
    width: 18px;
    height: 18px;
    color: #2e8cff;
}

.main-table-box {
    display: flex;
    border-bottom: 1px solid #e6e8eb;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.box-title {
    width: 38px;
    height: 20px;
    background: #55ca75;
    border-radius: 2px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    color: #ffffff;
}

.title-font {
    margin-left: 5px;
}

.item-right {
    display: inline-block;
    margin-left: 5px;
    text-align: center;
    /* width: 90px; */
    height: 26px;
    background: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 2px 10px;
}

.self-table-body {
    margin-top: 10px;
    cursor: pointer;
}

.self-table-body i {
    color: #02c5b7;
    font-size: 20px;
    line-height: 21px;
    margin-right: 4px;
}

.tips {
    height: 61px;
    background: #ffffff;
    border-radius: 2px;
    border: solid 1px #e6e8eb;
    border-left: 2px solid #2e8cff;
    margin-bottom: 15px;
    padding-left: 10px;
    display: flex;
    padding-top: 12px;
    margin-top: 10px;
}

.tips span {
    font-size: 12px;
    margin-left: 4px;
}

.right-card >>> .ant-card-head {
    min-height: 30px;
    padding: 0 10px;
}

.right-card >>> .ant-card-body {
    padding: 0 10px;
}

.right-card >>> .ant-card-head-title {
    padding: 0px;
}
</style>
